<template>
  <el-dialog
    v-model="dialogVisible"
    :title="state.dialogTitle"
    width="75%"
    @close="closeDialog"
  >
    <el-form class="demo-form-inline" :inline="true" :model="state.formData">
      <el-row>
        <el-col :span="6">
          <el-form-item label="存货编码">
            <el-input
              v-model="state.formData.invcode"
              placeholder="请输入物料编码"
              style="width: 100%"
            />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="物料规格">
            <el-input
              v-model="state.formData.invspec"
              placeholder="请输入物料规格"
            />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="批次号">
            <el-input
              v-model="state.formData.invbatch"
              placeholder="请输入批次号"
              style="width: 100%"
            />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="生产订单号">
            <el-input
              v-model="state.formData.scddh"
              placeholder="请输入生产订单号"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="6">
          <el-form-item label="设备名称">
            <el-input
              v-model="state.formData.shebeiName"
              placeholder="请输入设备名称"
            />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="工序名称">
            <el-input
              v-model="state.formData.opName"
              placeholder="请输入工序名称"
            />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="创建人">
            <el-input
              v-model="state.formData.createName"
              placeholder="请输入人员名称"
            />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="派工单号">
            <el-input
              v-model="state.formData.dispatchCode"
              placeholder="请输入派工单号"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="6">
          <el-form-item label="报工单号">
            <el-input
              v-model="state.formData.reportCode"
              placeholder="请输入报工单号"
            />
          </el-form-item>
        </el-col>
        <el-col :span="15" />
        <el-col :span="3">
          <el-button :icon="Search" plain type="primary" @click="toQuery">
            查询
          </el-button>
        </el-col>
      </el-row>
    </el-form>
    <el-table
      :data="state.dataSources"
      highlight-current-row
      size="small"
      style="width: 100%"
      @cell-dblclick="confirm"
      @current-change="handleCurrentChange"
    >
      <el-table-column
        label="物料编码"
        prop="invcode"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        label="物料名称"
        prop="invname"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        label="物料规格"
        prop="invspec"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        label="物料型号"
        prop="invtype"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        label="批次号"
        prop="invbatch"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        label="工序"
        prop="opName"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        label="创建人"
        prop="reUserName"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        label="创建时间"
        prop="reTime"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        label="生产订单号"
        prop="scddh"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        label="设备名称"
        prop="equipName"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        label="报工数"
        prop="reportQty"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        label="派工单号"
        prop="dispatchCode"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        label="报工单号"
        prop="reportCode"
        :show-overflow-tooltip="true"
      />
    </el-table>
    <el-pagination
      background
      :current-page="state.pageNo"
      :layout="state.layout"
      :page-size="state.pageSize"
      :total="state.total"
      @current-change="handlePaginationCurrentChange"
      @size-change="handlePaginationSizeChange"
    />
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="confirm">确定</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
  import { ref } from 'vue'
  import { Search } from '@element-plus/icons-vue'
  import { getTraceBackPageApi } from '@/api/mes/trace_back'
  import { localStorageConfig } from '@/config/localstorage.config'

  const pkCorp = localStorage.getItem(localStorageConfig.__pkCorp)
  const dialogVisible = ref(false)
  const $baseMessage = inject('$baseMessage')
  const state = reactive({
    dialogTitle: '在制品查询',
    formData: {
      invspec: '',
      invcode: '',
      scddh: '',
      shebeiName: '',
      opName: '',
      invbatch: '',
      createName: '',
    },
    dataSources: [],
    currentRow: null,
    pageNo: 1,
    pageSize: 10,
    total: 0,
    layout: 'total, sizes, prev, pager, next, jumper',
  })

  const handleCurrentChange = (val) => {
    state.currentRow = val
  }
  const handlePaginationCurrentChange = (...args) => {
    state.pageNo = args[0] ? args[0] : 1
    toQuery()
  }
  const handlePaginationSizeChange = (...args) => {
    state.pageSize = args[0] ? args[0] : 10
    state.pageNo = 1
    toQuery()
  }

  const toQuery = async () => {
    var params = {
      pkCorp: pkCorp,
      pageSize: state.pageSize,
      pageNum: state.pageNo,
      ...state.formData,
    }
    const { code, data } = await getTraceBackPageApi(params)

    if (code === 2000) {
      state.dataSources = data.list
      state.total = data.total
    }
  }

  const toOpenChaxunDialog = async () => {
    dialogVisible.value = true
  }

  const confirm = () => {
    if (state.currentRow) {
      _emits('search-dialog-callback', state.currentRow)
      dialogVisible.value = false
    } else {
      $baseMessage('请选择数据')
    }
  }
  const closeDialog = () => {
    dialogVisible.value = false
    state.currentRow = null
  }
  const _emits = defineEmits(['search-dialog-callback'])
  defineExpose({ toOpenChaxunDialog })
</script>
